/*
 * @Title: 攻略-游记详情模块
 * @Created by: gsjPC 
 */
<template>
	<view>
		<comHeader :config="navConfig"/>
		<view class="yjDetails">
			<image mode="scaleToFill" src="/static/testglPic7.jpg"></image>
		</view>
		<view class="yjClear"></view>
		<!-- 头部 -->
		<view class="detailsTit"><text>西伯利亚的蓝眼睛—贝加尔湖</text></view>
		<view class="topInfo">
			<view @tap="goMyTourNote">
				<view class="infoTouxiang"><image src="/static/myPic/touXiang.png"></image></view>
				<view class="infoName">
					<text>nairenk</text>
					<text>个人描述/个性签名</text>
				</view>
			</view>
			<view class="infoGuanzhu"><text>关注</text></view>
		</view>
		<!-- 内容 -->
		<view class="detailsCon">
				<view
				v-for="(yjDetail,index2) in yjDetails"
				:key="index2"
				class="detailsList">
				<view class="detailsPro">
					<text>
						贝加尔湖中国古称北海，曾为中国北方部族主要活动地区，清朝曾短期控制该地，《尼布楚条约》后，将这块地区划归俄罗斯帝国。贝加尔湖地区是伊尔库次克少数民族聚居地，其中以蒙古族的支系布力亚特人口居多。
					</text>
				</view>
				<view><image :src="yjDetail.pic"></image></view>
				</view>
		</view>
		<!-- 搜藏评论点赞-->
		<view class="actionBox">
			<view class="actionItem" @tap="zanBtn">
				<image :src="zanImg[zanImgIndex]"></image>
				<text>15</text>
			</view>
			<view class="actionItem" @tap="togglePopup('bottom', 'share')">
				<image src="/static/fenxiang-1.png"></image>
				<text>9</text>
			</view>
			<view class="actionItem" @tap="shoucangBtn">
				<image :src="shoucangImg[shoucangImgIndex]"></image>
				<text>188</text>
			</view>
			
		</view>
		<!-- <view class="talkInput " :class="popupLayerClass">
			<image src="/static/talkInput.png"></image>
			<input 
			type="input" 
			placeholder="留下你的足迹吧！" 
			placeholder-style="color:#CCCCCC"
			adjust-position="true"
			/>
		</view> -->
		<!-- 热门评论 -->
		<view class="talkBox">
			<comment  :isShowPlBox="isShowPlBox" :isShowAllHead="isShowAllHead"></comment>
		</view>
		
		<!-- 底部分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true" @change="change">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Comment from '@/components/Comment'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components:{
			Comment,
			uniPopup
		},
		data(){
			return{
				isShowPlBox:true,
				isShowAllHead:false,
				hideMore:true, //默认隐藏
				navConfig:{
					comScroll:134,
					isFixed:false,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:'',
						textColor:'#ffffff'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				type: '',
				yjDetails:[
					{pic:'/static/testglPic6.jpg'},
					{pic:'/static/testglPic8.jpg'},
					{pic:'/static/testglPic9.jpg'}
				], //scroll图片
				shoucangImgIndex:0, //默认显示未收藏
				shoucangImg:[require('../../../static/glSoucang0.png'), require('../../../static/glSoucang1.png') ],
				zanImg:[require('../../../static/zan.png'),require('../../../static/glZan1.png')],
				zanImgIndex:0,//默认显示未点赞
				popupLayerClass:'',// 抽屉参数
			}
		},
		methods:{
			// 分享弹窗
			togglePopup(type, open) {
				this.type = type
				
					this.$refs[open].open()
			},
			cancel(type) {
				
				this.$refs[type].close()
			},
			change(e) {
				console.log(e.show)
			},
			zanBtn(){
				this.zanImgIndex = 1
			},
			shoucangBtn(){
				this.shoucangImgIndex = 1
			},
			// 跳转到我的游记主页
			goMyTourNote(){
				uni.navigateTo({
					url:'./myTourNote'
				})
			},
			showMore(){
				if(this.hideMore){
					this.hideMore = false;
					this.openDrawer();
				}else{
					this.hideDrawer()
				}
			},
			openDrawer(){
				this.popupLayerClass = 'showLayer'
			},
			hideDrawer(){
				this.popupLayerClass = '';
				
			}
		},
		computed:{
			// setYjHeight(){
			// 	let statusBarHeight = global.statusBarHeight
			// 	return 200 - statusBarHeight
			// }
		}
	}
</script>

<style scoped>
	/* 头部S */
	.yjDetails{
		width:100%;
		height:400upx;
		background: #ddd;
		position: absolute;
		left:0;
		top:0;
		z-index: 9;
	}
	.yjDetails image{
		width:100%;
		height:400upx;
	}
	.yjClear{
		width:100%;
		clear: both;
		overflow: hidden;
		height:400upx;
	}
	.topInfo{
		margin:20upx 28upx 53upx 28upx;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
	}
	.topInfo > view{
		display: flex;
		flex-direction:row;
		justify-content: center;
		align-items: center;
	}
	.infoTouxiang{
		width:74upx;
		height:74upx;
		border-radius: 74upx;
		background-color: #DDDDDD;
	}
	.infoTouxiang image{
		width:100%;
		height: 100%;
	}
	.infoName{
		margin-left: 25upx;
	}
	.infoName text{
		display: block;
	}
	.infoName text:first-child{
		font-size: 28upx;
		color: #333333;
	}
	.infoName text:nth-child(2){
		font-size: 24upx;
		color: #999999;
	}
	.infoGuanzhu{
		padding:0 20upx;
		border-radius: 50upx;
		height: 38upx;
		line-height: 38upx;
		border:1upx solid #4E94F3;
		color: #5773FE;
		font-size: 24upx;
	}
	/* 头部E */
	
	.talkInput.showLayer{
		 transform: translate3d(0,-548upx,0)
	}
	.detailsTit{
		color: #010101;
		font-size: 32upx;
		margin:46upx 28upx 46upx 28upx;
	}
	
	.detailsList{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.detailsList:first-child{
		margin-left: 28upx;
	}
	.detailsList image{
		width:680upx;
		height:324upx;
		background-color: #ddd;
		border-radius: 20upx;
	}
	.detailsPro{
		margin:32upx 28upx 32upx 28upx;
		color: #666666;
		font-size:24upx;
		line-height: 40upx;
	}
	.actionBox{
		display: flex;
		flex-direction: row;
		justify-content:flex-end;
		align-items: center;
		margin-right: 28upx;
		margin-top: 30upx;
	}
	.actionItem{
		margin-left: 40upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.actionItem image{
		max-height: 30upx;
		max-width: 30upx;
		margin-right: 8upx;
	}
	.actionItem text{
		font-size:24upx;
		color: #999999;
	}
	.talkInput{
		width:690upx;
		height: 90upx;
		line-height: 90upx;
		margin: 50upx auto 0 auto;
		border: 1upx solid #DCDCDC;
		position: relative;
	}
	.talkInput > image{
		width:30upx;
		height: 40upx;
		position: absolute;
		top:50%;
		margin-top: -20upx;
		left: 40upx;
	}
	.talkInput input{
		height: 90upx;
		line-height: 90upx;
		padding-left: 90upx;
	}
	/* .talkBox{
		margin:52upx 38upx 30upx 30upx;
	} */
	.talkTit{
		margin:52upx 38upx 0upx 30upx;
		font-size: 28upx;
		color: #010101;
	}
	.talkTit:before{
		content: "";
		display: inline-block;
		width:5upx;
		height: 23upx;
		background-color: #54B0FF;
		margin-right: 14upx;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
	}
</style>
